<template>
  <div class="components-container">
    <div class="filter-container">
      <el-date-picker
        v-model="listrQuery.year"
        type="year"
        size="small"
        :picker-options="pickerOptions"
        value-format="yyyy"
        :clearable="false"
        placeholder="选择年"
        class="filter-item"
      ></el-date-picker>
      <el-select
        size="small"
        v-model="listrQuery.month"
        placeholder="月份"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option value="1" label="一月"></el-option>
        <el-option value="2" label="二月"></el-option>
        <el-option value="3" label="三月"></el-option>
        <el-option value="4" label="四月"></el-option>
        <el-option value="5" label="五月"></el-option>
        <el-option value="6" label="六月"></el-option>
        <el-option value="7" label="七月"></el-option>
        <el-option value="8" label="八月"></el-option>
        <el-option value="9" label="九月"></el-option>
        <el-option value="10" label="十月"></el-option>
        <el-option value="11" label="十一月"></el-option>
        <el-option value="12" label="十二月"></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listrQuery.applySource"
        clearable
        placeholder="渠道"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in applySource"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listrQuery.productName"
        clearable
        placeholder="产品"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in productName"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listrQuery.userType"
        clearable
        placeholder="客群"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in userType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listrQuery.strategyVersion"
        clearable
        placeholder="策略版本"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in strategyVersion"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter('季度')"
        type="primary"
        class="filter-item"
        ref="btnQuery"
      >
        查询
      </el-button>
      <el-button
        @click="handleReset('季度')"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
      >
        重置
      </el-button>
      <!-- <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
      >
        下载
      </el-button> -->
      <el-button
        @click="setValue"
        size="small"
        type="primary"
        class="filter-item"
      >
        设置基准数
      </el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        label="属性"
        prop="indicator"
        align="center"
      ></el-table-column>
      <el-table-column
        label="基线数量"
        prop="quantityBase"
        align="center"
      ></el-table-column>
      <el-table-column
        label="基线%"
        prop="rateBase"
        align="center"
      ></el-table-column>
      <el-table-column
        label="当前申请"
        prop="quantityCurrent"
        align="center"
      ></el-table-column>
      <el-table-column
        label="当前%"
        prop="rateCurrent"
        align="center"
      ></el-table-column>
      <el-table-column
        label="比例变化%[C-E]"
        prop="rateChange"
        align="center"
      ></el-table-column>
      <el-table-column
        label="分数"
        prop="rateScore"
        align="center"
      ></el-table-column>
    </el-table>
    <el-dialog
      title="设置基准线数"
      :visible.sync="setDialog"
      :modal-append-to-body="false"
      width="500px"
      :before-close="handleClose"
    >
      <el-form :model="valForm" label-width="100px">
        <el-form-item label="特征选择">
          <el-select
            v-model="featureId"
            placeholder="特征属性"
            style="width: 80%;"
            @change="featureSelect"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="(item, index) in valForm"
          :key="index"
          :label="index"
          label-position="right"
        >
          <el-input-number
            v-model="item.all"
            autocomplete="off"
            :controls="false"
            style="width:80%;"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveValue">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import {
  getApply,
  getProducts,
  getUserTypes,
  getStrategyVersions
} from '@/api/risksystem/riskMarket/search.ts'
import {
  getConfigFeature,
  saveFeature,
  getFeature,
  getList
} from '@/api/risksystem/riskMarket/characteristicAnalysis.ts'
const defaultPage = {
  limit: 10,
  current_page: 1
}
const defaultQuery = {
  feature: 'age',
  year: String(new Date().getFullYear()),
  productName: '',
  userType: '',
  applySource: '',
  strategyVersion: '',
  month: String(new Date().getMonth() + 1)
}
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private listrQuery: any = Object.assign({}, defaultQuery)
  private productName = [] //产品名
  private applySource = [] //渠道
  private userType = [] //客群
  private strategyVersion = [] // 版本

  private tableData = []

  private valForm = {}
  private options = []
  private pickerOptions = {
    disabledDate(time: any) {
      return time.getTime() > Date.now()
    }
  }
  private featureId = 'age'
  private valName = 'score_feature/' + this.featureId
  private setDialog = false
  created() {
    this.getApplylist()
    this.getProducts()
    this.getUserTypes()
    this.getStrategyVersions()
    this.gitFeatureList()
    this.gitValue()
    this.getTable()
  }
  mounted() {
    // this.getApply()
  }
  // 搜索数据源获取
  private async getApplylist() {
    const res = await getApply()
    this.applySource = res.data.applySources
  }
  private async getProducts() {
    const res = await getProducts()
    this.productName = res.data.products
  }
  private async getUserTypes() {
    const res = await getUserTypes()
    this.userType = res.data.userTypes
  }
  private async getStrategyVersions() {
    const res = await getStrategyVersions()
    this.strategyVersion = res.data.strategyVersions
  }

  // 基准数获取
  private featureSelect() {
    this.listrQuery.feature = this.featureId
    this.gitValue()
  }
  private async gitValue() {
    const res: any = await getConfigFeature({ feature: this.featureId })
    this.valForm = res.data
    // this.listrQuery.value = this.valForm
    if (res.code === 0) {
      this.getTable()
    }
  }
  private async saveValue() {
    const res: any = await saveFeature({
      feature: this.featureId,
      value: this.valForm
    })
    if (res.code === 0) {
      this.handleClose()
      this.getTable()
    }
  }
  // 获取特征数据源
  private async gitFeatureList() {
    const { data } = await getFeature()
    this.options = data.features
  }
  // 列表获取
  private async getTable() {
    const { data } = await getList({ search: this.listrQuery })
    this.tableData = data.rows
  }
  // 查询、重置
  private handleFilter(val: string) {
    this.listrQuery.current_page = 1
    this.getTable()
  }
  private handleReset(val: string) {
    this.listrQuery = Object.assign({}, defaultQuery)
  }
  private setValue() {
    this.gitValue()
    this.setDialog = true
  }
  private handleClose() {
    this.setDialog = false
  }
  private downloand() {
    console.log('下载')
  }
}
</script>
<style scoped>
.components-container {
  padding: 20px;
}
</style>
